<template>
  <div class="iconDoc">
    <div class="mask"></div>
    <div class="icondoc">

      <div class="icd-top">
        <p>洗涤图标</p>
        <i class="el-icon-close" @click="closeIconDoc"></i>
      </div>

      <div class="icd-info">
        <div>
          <p>代号</p>
          <el-input v-model="code" disabled></el-input>
        </div>
        <div>
          <p>图标编号</p>
          <el-input v-model="imageNo" disabled></el-input>
        </div>
        <div>
          <p>洗标说明</p>
          <el-input v-model="washInfo" disabled></el-input>
        </div>
        
        <img>
      </div>

      <el-table
        class="iconTable"
        :data="iconData"
        border
        style="width: 780px"
        height="350px"
        :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
        :cell-style="{padding:0,height:'36px'}"
        @row-click="rowClick">
        <el-table-column
          prop="code"
          label="代号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="imageNo"
          label="图标编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="washInfo"
          label="洗标说明">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getWash } from '../../../../network/wash'

export default {
  data(){
    return {
      code: '',
      imageNo: '',
      washInfo: '',
      iconData: []
    }
  },
  methods: {
    closeIconDoc(){
      this.$emit("closeIconDoc")
    },
    rowClick(e){
      this.code = e.code
      this.imageNo = e.imageNo
      this.washInfo = e.washInfo
    }
  },
  created(){
    getWash().then(res => {
      // console.log(res)
      this.iconData = res.data.data
    })
  }
}
</script>

<style scoped>
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
  .icondoc {
    position: fixed;
    top: 25%;
    left: 50%;
    width: 800px;
    height: 500px;
    transform: translateX(-50%);
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99;
  }
  .icd-top{
    background-color: #f2f2f2;
    height: 50px;
    margin-bottom: 15px;
  }
  .icd-top p {
    float: left;
    margin: 15px 0 0 20px;
    font-weight: bolder;
  }
  .icd-top i {
    width: 50px;
    float: right;
    text-align: center;
    line-height: 50px;
  }
  
  .icd-info{
    height: 60px;
    display: flex;
  }
  .icd-info p{
    display: inline;
    margin-left: 10px;
  }
  .icd-info img{
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: aqua;
  }

  .iconTable{
    margin: 0 auto;
  }

  .icd-op{
    position: relative;
    bottom: -82px;
    right: -600px;
  }
</style>

<style>
  .icd-info .el-input{
    margin-left: 15px;
    width: 160px;
  }
</style>